<template>
  <div class="chartbod">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="24" :lg="12" :xl="12">
        <div class="leftboder">
          <div :id="id" :class="className" :style="{height:height,width:width}" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" :xl="12">
        <div class="rightboder">
          <div :id="idtwo" :class="classNametwo" :style="{height:height,width:width}" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { deptStatistics } from '@/api/datastatistics/index'
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    classNametwo: {
      type: String,
      default: 'chartwo'
    },
    idtwo: {
      type: String,
      default: 'chartwo'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.initChartreg()
  },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  methods: {
    initChart() {
      var that = this
      var params = {}
      // params.page = that.page.currentPage// 当前页数
      // params.pageSize = that.page.pageSize// 每页展示条数
      // params.data = that.data
      // if (that.searchKey.time && that.searchKey.time.length > 0) {
      //   params.start_time = that.searchKey.time[0] // 申请寄回开始时间
      //   params.end_time = that.searchKey.time[1] // 申请寄回结束时间
      // } else {
      //   params.start_time = ''
      //   params.end_time = ''
      // }
      // console.log(params)
      deptStatistics(params).then(res => {
        var datate = []
        var titlename = []
        const data = res.data
        for (var i = 0; i < data.num_list.length; i++) {
          that.fee = data.num_list[i].num
          datate.push(that.fee)
          that.dept_name = data.num_list[i].dept_name
          titlename.push(that.dept_name)
        }

        this.chart = echarts.init(document.getElementById(this.id))
        // var datae = [200, 340, 65, 500, 230]
        // var titlename = ['儿科', '骨科', '内科', '呼吸科', '妇产科']
        var valdata = [683, 234, 683, 234, 683]

        this.chart.setOption({
          backgroundColor: '#fff',
          title: {
            text: '挂号量排名前5的科室',
            left: '10',
            top: '15',
            textStyle: {// 主标题的属性
              color: '#333', // 颜色
              fontSize: 16, // 大小
              fontFamily: 'PingFang SC' // 字体
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
          // top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '-6%',
            height: '90%',
            containLabel: true
          },
          xAxis: {
            show: false
          },
          yAxis: [{
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#4A5A7F',
              rich: {
                lg: {
                // backgroundColor: '#339911',
                  borderRadius: 2,
                  padding: 5,
                  align: 'center',
                  width: 30,
                  height: 30
                }
              }
            }

          }, {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#212B42'
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }

          }],
          series: [{
          // name: '框',
            type: 'bar',
            yAxisIndex: 1,
            axisPointer: {
              show: false
            },
            // barGap: '-100%',
            data: [1000, 1000, 1000, 1000, 1000],
            barWidth: 5,
            itemStyle: {
              normal: {
                borderWidth: 2,
                barBorderRadius: 2,
                color: function(params) {
                  var myColortwo = ['#FFDADF', '#DFE6FD', '#FFF7DB', '#D5F4EC', '#fff']
                  return myColortwo[params.dataIndex]
                }
              }
            }
          }, {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: datate,
            barWidth: 5,
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: function(params) {
                  var myColor = ['#F34D4E', '#408AFF', '#FDD843', '#25D096', '#CF8FF8']
                  return myColor[params.dataIndex]
                }
              }
            }
          }]
        })
      }).catch(error => {
        that.$message({
          message: error
        })
      })
    },
    initChartreg() {
      var that = this
      var params = {}
      // params.page = that.page.currentPage// 当前页数
      // params.pageSize = that.page.pageSize// 每页展示条数
      // params.data = that.data
      // if (that.searchKey.time && that.searchKey.time.length > 0) {
      //   params.start_time = that.searchKey.time[0] // 申请寄回开始时间
      //   params.end_time = that.searchKey.time[1] // 申请寄回结束时间
      // } else {
      //   params.start_time = ''
      //   params.end_time = ''
      // }
      // console.log(params)
      deptStatistics(params).then(res => {
        var datate = []
        var titlename = []
        const data = res.data
        for (var i = 0; i < data.fee_list.length; i++) {
          that.fee = data.fee_list[i].num
          datate.push(that.fee)
          that.dept_name = data.fee_list[i].dept_name
          titlename.push(that.dept_name)
        }

        this.chartwo = echarts.init(document.getElementById(this.idtwo))
        var valdata = [683, 234, 683, 234, 683]
        // var data = [200, 340, 65, 500, 230]
        // var titlename = ['儿科', '骨科', '内科', '呼吸科', '妇产科']
        // var valdata = [683, 234, 234, 523, 345]
        this.chartwo.setOption({
          backgroundColor: '#fff',
          title: {
            text: '交易量排名前5的科室',
            left: '10',
            top: '15',
            textStyle: {// 主标题的属性
              color: '#333', // 颜色
              fontSize: 16, // 大小
              fontFamily: 'PingFang SC' // 字体
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
          // top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '-6%',
            height: '90%',
            containLabel: true
          },
          xAxis: {
            show: false
          },
          yAxis: [{
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#4A5A7F',
              rich: {
                lg: {
                // backgroundColor: '#339911',
                  borderRadius: 2,
                  padding: 5,
                  align: 'center',
                  width: 30,
                  height: 30
                }
              }
            }

          }, {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: '#212B42'
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }

          }],
          series: [{
          // name: '框',
            type: 'bar',
            yAxisIndex: 1,
            axisPointer: {
              show: false
            },
            // barGap: '-100%',
            data: [1000, 1000, 1000, 1000, 1000],
            barWidth: 5,
            itemStyle: {
              normal: {
                borderWidth: 2,
                barBorderRadius: 2,
                color: function(params) {
                  var myColortwo = ['#FFDADF', '#DFE6FD', '#FFF7DB', '#D5F4EC', '#fff']
                  return myColortwo[params.dataIndex]
                }
              }
            }
          }, {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: datate,
            barWidth: 5,
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: function(params) {
                  var myColor = ['#F34D4E', '#408AFF', '#FDD843', '#25D096', '#CF8FF8']
                  return myColor[params.dataIndex]
                }
              }
            }
          }]
        })
      }).catch(error => {
        that.$message({
          message: error
        })
      })
    }
  }
}
</script>
<style scoped>
.chartbod{
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px 0;
  box-sizing: border-box;
}
.leftboder{
  width: 600px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rightboder{
  width: 602px;
  height: 302px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>
